<template>
  <div>
    <div class="app-container">
      <Search
        ref="search"
        :schema="searchScheme"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="handleSearch"
        @reset="handleSearch"
      />
    </div>
    <Table
      :data="emps"
      :columns="columns"
      :loading="loading"
      row-key="EmpId"
      :pagination="paging"
      @change="loadEmp"
    >
      <template #empBase="e">
        <div class="userInfo">
          <div class="head">
            <img
              v-if="e.row.UserHead == null || e.row.UserHead == ''"
              src="@/assets/imgs/avatar.png"
              width="50"
              height="50"
            />
            <el-avatar v-else shape="square" :size="50" :src="$formatFileUri(e.row.UserHead)" />
          </div>
          <div class="content">
            <div class="item">
              <Icon v-if="e.row.Sex == 1" style="color: #409eff" icon="ep:male" />
              <Icon v-else-if="e.row.Sex == 2" style="color: #f56c6c" icon="ep:female" />
              <el-link @click="showEmp(e.row)">{{ e.row.EmpName }}</el-link>
            </div>
            <div class="empNo">{{ e.row.EmpNo }}</div>
          </div>
        </div>
      </template>
      <template #empPost="e">
        <template v-if="e.row.EntryPost">
          {{ e.row.EntryPost.Name }}
          <el-tooltip v-if="e.row.Post && e.row.Post.length > 0" effect="dark" placement="bottom">
            <template #content>
              <div>
                <p v-for="(t, index) in e.row.Post" :key="index">
                  {{ t.Show }}
                </p>
              </div>
            </template>
            <Icon icon="ep:more" />
          </el-tooltip>
        </template>
        <template v-else-if="e.row.Post && e.row.Post.length > 0">
          {{ e.row.Post[0].Show }}
          <el-tooltip v-if="e.row.Post.length > 1" effect="dark" placement="bottom">
            <template #content>
              <div>
                <p v-for="(t, index) in e.row.Post" :key="index">
                  {{ t.Show }}
                </p>
              </div>
            </template>
            <Icon icon="ep:more" />
          </el-tooltip>
        </template>
      </template>
      <template #empTitle="e">
        <template v-if="e.row.EntryTitle">
          {{ e.row.EntryTitle.Name }}
          <el-tooltip v-if="e.row.Title && e.row.Title.length > 0" effect="dark" placement="bottom">
            <template #content>
              <div>
                <p v-for="(t, index) in e.row.Title" :key="index">
                  {{ t.Show }}
                </p>
              </div>
            </template>
            <Icon icon="ep:more" />
          </el-tooltip>
        </template>
        <template v-else-if="e.row.Title && e.row.Title.length > 0">
          {{ e.row.Title[0].Show }}
          <el-tooltip v-if="e.row.Title.length > 1" effect="dark" placement="bottom">
            <template #content>
              <div>
                <p v-for="(t, index) in e.row.Title" :key="index">
                  {{ t.Show }}
                </p>
              </div>
            </template>
            <Icon icon="ep:more" />
          </el-tooltip>
        </template>
      </template>
      <template #userType="e">
        {{ HrUserType[e.row.UserType].text }}
      </template>
    </Table>
    <empModel :id="empId" v-model:visible="empVisible" />
  </div>
</template>
<script>
import { useUserStoreWithOut } from '@/store/modules/user'
import { Table } from '@/components/Table/'
import { HrItemDic, HrUserType } from '@/config/publicDic'
import { Search } from '@/components/Search'
import { query } from '@/api/emp/emp'
import empModel from './empModel.vue'
const userStore = useUserStoreWithOut()
export default {
  components: {
    Search,
    Table,
    empModel
  },
  props: {
    status: {
      type: Array,
      default: () => [1]
    },
    companyId: {
      type: String,
      default: () => {
        return userStore.comId
      }
    },
    unitId: {
      type: String,
      default: null
    },
    deptId: {
      type: Array,
      default: null
    },
    isEntry: {
      type: Boolean,
      default: true
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      HrUserType,
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      },
      emps: null,
      loading: false,
      empVisible: false,
      empId: null,
      searchScheme: [
        {
          field: 'QueryKey',
          label: '关键字',
          component: 'Input',
          componentProps: {
            placeholder: '人员名/编号/手机号'
          }
        },
        {
          field: 'Post',
          label: '岗位',
          component: 'TreeDicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.post,
            placeholder: '人员岗位'
          }
        },
        {
          field: 'Title',
          label: '职务',
          component: 'DicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.title,
            placeholder: '人员职务'
          }
        }
      ],
      queryParam: {
        CompanyId: null,
        Title: null,
        UnitId: null,
        DeptId: null,
        IsEntry: null,
        Post: null,
        QueryKey: null,
        Status: null
      },
      columns: [
        {
          field: 'EmpNo',
          label: '人员信息',
          align: 'left',
          fixed: 'left',
          sortable: true,
          slotName: 'empBase',
          minWidth: '210px',
          sortable: 'custom'
        },
        {
          field: 'Dept',
          label: '单位部门',
          align: 'left',
          sortable: true,
          minWidth: 120,
          sortby: 'DeptId',
          sortable: 'custom'
        },
        {
          key: 'Phone',
          title: '手机号',
          align: 'center'
        },
        {
          field: 'Post',
          label: '岗位',
          align: 'center',
          slotName: 'empPost',
          minWidth: 150
        },
        {
          field: 'DeptTitle',
          label: '职务',
          align: 'center',
          slotName: 'empTitle',
          minWidth: 150
        },
        {
          field: 'UserType',
          label: '人员类型',
          align: 'center',
          sortable: 'custom',
          slotName: 'userType',
          minWidth: 110
        }
      ]
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    isEntry: {
      handler(val) {
        if (this.isLoad) {
          this.reset()
        }
      },
      immediate: false
    }
  },
  methods: {
    reset() {
      this.queryParam.CompanyId = this.companyId
      this.queryParam.UnitId = this.unitId ? [this.unitId] : null
      this.queryParam.DeptId = this.deptId
      this.queryParam.IsEntry = this.isEntry
      this.queryParam.Status = this.status
      this.loadEmp()
    },
    handleSearch(data) {
      this.queryParam = Object.assign(this.queryParam, data)
      this.loadEmp()
    },
    showEmp(row) {
      this.empId = row.EmpId
      this.empVisible = true
    },
    async loadEmp(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'EmpId',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await query(this.queryParam, curPaging)
      if (res.List) {
        this.emps = res.List
      } else {
        this.emps = []
      }
      this.paging.total = res.Count
    }
  }
}
</script>
